<template>
	<view class="content">
		<u-navbar :is-back="false" title="购物车" title-color="white" :background="background"></u-navbar>
		<!-- 购物车 -->
		<view class="cart u-p-20" v-if="tableData.length">
			<view class="cart-item" :key="item.id" v-for="(item,index) in tableData">
				<u-row gutter="1">
					<u-col span="1">
						<u-checkbox-group>
							<u-checkbox v-model="item.checked" shape="circle" @change="checkedBox(item)"></u-checkbox>
						</u-checkbox-group>
					</u-col>
					<u-col span="3">
						<image style="width: 160rpx;height: 160rpx;" :src="item.image" class="cart-item-cover">
							</u-image>
					</u-col>
					<u-col span="8">
						<view class="cart-info">
							<view class="goods-name">
								<text style="overflow: hidden;display: inline-block;"
									class="overflow">{{item.productName}}</text>
								<u-icon name="trash-fill" color="#e54d42" size="40" @click="del(item.id)"></u-icon>
							</view>
							<view class="">
								<u-tag :text="item.attributeList" mode="light" size="mini" type="info" />
							</view>
							<u-row class="cart-footer">
								<u-col span="6">
									<text class="price">￥{{item.price}}</text>
								</u-col>
								<u-col span="6">
									<uni-number-box v-model="item.num" @change="valChange(index)"></uni-number-box>
								</u-col>
							</u-row>
						</view>
					</u-col>
				</u-row>
			</view>
			<u-loadmore :status="totalstatus"></u-loadmore>
		</view>
		<view class="" v-else>
			<u-empty text="购物车为空" mode="car" class="flex justify-center align-center">
				
					<view slot="bottom" class="">
						<u-button type="primary" text="确定" style="margin:0 30upx;" v-if="token"
							@click="$u.route('/pages/good/goodsList/goodsList');">
							快去看看
						</u-button>
						<u-button type="primary" text="确定" style="margin:0 30upx;" v-else
							@click="$u.route('/pages/home/login/login');">
							前往登录
						</u-button>
					</view>
				
			</u-empty>
			
		</view>



		<!-- 底部框 -->
		<view class="cart-footer-tool" v-if="tableData.length">
			<view>
				<u-checkbox-group>
					<u-checkbox v-model="checked" shape="circle" @change="quan">全选</u-checkbox>
				</u-checkbox-group>
			</view>
			<view style="text-align: right;">
				<view class="flex align-center">
					<text>
						合计:
						<text>￥{{priceTotal}}</text>
					</text>
					<view class="cu-btn radius-sm bg-gradual-blue" style="margin:0 30rpx;" @click="cnofimr">结算</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog :type="msgType" cancelText="取消" confirmText="确定" title="提示" content="确定删除该商品吗"
				@confirm="ShoppingCartDelete" @close="cancel"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 'center',
				msgType: 'error',
				messageText: '这是一条成功提示',
				loading: false,
				token: uni.getStorageSync('token') ? true : false,
				value: '',
				total:0,
				background: {
					backgroundImage: 'linear-gradient(45deg, rgb(42,132,255), rgb(234,175,200))'
				},
				checked: false,
				value: 1,
				cartIndex: '',
				searchVal: {
					pageIndex: 1,
					pageSize: 10,
					sorting: 'CreationTime'
				},
				tableData: [],
				total: 0,
				Ids: '',
				totalstatus:'nomore'
			};
		},
		computed: {
			priceTotal() {
				let total = 0
				if (this.tableData.length > 0) {
					this.tableData.forEach(v => {
						if (v.checked) {
							total = total + v.price * v.num
						}
					})
				}
				return total
			}
		},
		onShow() {
			if(this.token){
				this.getData()
			}
		},
		onReachBottom(){
			if(this.total<=this.orderList.length){
				this.totalstatus='nomore'
			}else {
				this.searchVal.pageIndex+=1
				this.totalstatus='loading'
				this.getData()
			}
		},
		onPullDownRefresh(){
			this.pageIndex=1
			this.getData()
		},
		methods: {
			getData() {
				this.loading = false
				this.checked=false 
				this.$ajax.GetShoppingCart(this.searchVal).then(res => {
					this.tableData = res.data.map(v => {
						v.checked = false
						return v
					})
					this.loading = true
					this.total=res.total
					uni.stopPullDownRefresh()
				})
			},
			valChange(e) {
				let result = this.tableData[e]
				this.$ajax.InsertShoppingCart(result).then(res => {
					this.getData()
				})
				
			},
			// 删除弹窗
			del(Ids) {
				this.$refs.popup.open(this.type)
				this.Ids = Ids
			},
			ShoppingCartDelete() {
				let id=[]
				id.push(this.Ids)
				this.$ajax.ShoppingCartDelete(id).then(res => {
					uni.showToast({
						icon: 'none',
						title: '删除成功',
						duration: 2000
					})
					this.getData()
					this.cancel()
				})
			},
			cancel() {
				this.$refs.popup.close()
			},
			// 全选
			quan(val) {
				this.tableData = this.tableData.map(v => {
					v.checked = val.value
					return v
				})
			},
			// 选择
			checkedBox(val) {
				val.checked = !val.checked
				let result = this.tableData.filter(v => {
					if (v.checked) {
						return v
					}
				})
				if (result.length < this.tableData.length) {
					this.checked = false
				} else {
					this.checked = true
				}
			},
			// 结算
			cnofimr() {
				let that = this
				let body = ''
				let name = that.tableData.filter(v => {
					if (v.checked) {
						body += v.productName + ","
						return v.productName
					}
				})
				let data = {
					memberId: uni.getStorageSync('userInfo').id,
					body: body,
					paymold: '1',
					paytype: '1',
					payamount: that.priceTotal,
					pay: 'Applet',
					state: false,
					list: this.tableData.filter(v => v.checked)
				}
				let ids=[]
				this.tableData.forEach(v=>{
					if(v.checked){
						ids.push(v.id)
					}
				})
				let result = false
				this.tableData.forEach(v => {
					if (v.checked == true) {
						result = true
					}
				})
				if (result) {
					uni.navigateTo({
						url: `/pages/order/submitOrder/submitOrder?val=${JSON.stringify(data)}&ids=${JSON.stringify(ids)}`
					})
				} else {
					uni.showToast({
						title: '请选择商品',
						icon: 'none',
						duration: 2000
					})
				}

			}
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #FDFDFD;
	}

	.cart {
		width: 100vw;
		// background-color: #FFFFFF;

		.cart-item {
			width: 100%;
			height: 185upx;

			.u-col,
			.u-checkbox-group {
				height: 100%;
			}

			.cart-item-cover {
				border: 1upx solid #DBF1E1;
			}

			.cart-info {
				display: flex;
				flex-direction: column;
				align-items: left;
				justify-content: center;

				.goods-name {
					font-size: 30upx;
					margin-bottom: 10upx;
					overflow: hidden;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}

				.cart-footer {
					margin-top: 10upx;

					.number-box {
						display: flex;
						flex-direction: column;
						align-items: right;
					}
				}
			}
		}
	}

	.cart-footer-tool {
		width: 100vw;
		height: 100upx;
		display: flex;
		padding: 0 20rpx;
		justify-content: space-between;
		align-items: center;
		border: 1px solid #DCDFE6;
		position: fixed;
		left: 0;
		bottom: 0upx;
	}

	.overflow {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
</style>